<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <p>{{ count }}</p>
    <p>{{ count }}</p>
    <p>{{ count }}</p>
    <p>{{ count }}</p>
    <p>{{ count }}</p>
    <button @click="$store.commit('add')">+1</button>
    <button @click="add">+1</button>
    <button @click="increment(100)">+100</button>
    <button @click="$store.dispatch('addAsync')">1秒之后+1</button>
    <button @click="$store.dispatch('addAsync')">1秒之后+1</button>
    <Heima></Heima>
    <p>{{ $store.state.arr.filter((item) => item > 50) }}</p>
  </div>
</template>

<script>
import Heima from "./components/Heima.vue";
// commit -> mutations
// dispatch -> action
// mapState是写在计算属性中
// mapMutations是写methods中
// mapActions
// mapGetters 命名空间模块化的写法

// $store.state.user.userinfo.username

import { mapState, mapMutations } from "vuex";
export default {
  components: {
    Heima,
  },
  data() {
    return {};
  },
  methods: {
    // add既是函数名 也是mutations中key
    ...mapMutations(["add", "increment"]),
    // increment(num) {
    //   this.$store.commit("increment", num);
    // },
  },
  computed: {
    ...mapState(["count"]),
  },
};
</script>

<style scoped></style>
